<!-- 水位流量关系 -->
<template>
  <div class="stageDischarge-page">
    <div class="header">
      <div class="dateRangePicker">
        <span class="title">实测时间</span>
        <a-select v-model:value="state.selectedValue" style="width: 200px">
          <a-select-option v-for="(item, index) in state.mstmData" :value="item" :key="index">
            {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <a-button type="primary" @click="getZvarlData" :loading="state.loading">查询</a-button>
      <div class="floodAmount">
        <div class="cal-item">
          <a-input
            v-model:value="state.Z"
            style="width: 140px; margin-right: 10px; height: 28px"
            prefix="水位："
          />
          <a-button-group>
            <a-tooltip placement="bottom">
              <template #title>
                <span>蓄水量转水位</span>
              </template>
              <a-button @click="handleClickWToZ">
                <template #icon>
                  <LeftOutlined />
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>
                <span>水位转蓄水量</span>
              </template>
              <a-button @click="handleClickZToW">
                <template #icon>
                  <RightOutlined />
                </template>
              </a-button>
            </a-tooltip>
          </a-button-group>
          <a-input
            v-model:value="state.W"
            style="width: 140px; margin-left: 10px; height: 28px"
            prefix="蓄水量："
          />
        </div>
        <div class="cal-item">
          <a-input
            v-model:value="state.Z_"
            style="width: 140px; margin-right: 10px; height: 28px"
            prefix="水位："
          />
          <a-button-group>
            <a-tooltip placement="bottom">
              <template #title>
                <span>蓄水量转水位</span>
              </template>
              <a-button @click="handleClickWToZ_">
                <template #icon>
                  <LeftOutlined />
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>
                <span>水位转蓄水量</span>
              </template>
              <a-button @click="handleClickZToW_">
                <template #icon>
                  <RightOutlined />
                </template>
              </a-button>
            </a-tooltip>
          </a-button-group>
          <a-input
            v-model:value="state.W_"
            style="width: 140px; margin-left: 10px; height: 28px"
            prefix="蓄水量："
          />
        </div>
      </div>
      <a-tooltip placement="bottom">
        <template #title>
          <span>比较蓄水量差</span>
        </template>
        <a-button @click="compareNum" style="margin-left: 10px; height: 28px">
          <template #icon>
            <DoubleRightOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <a-input
        v-model:value="state.compareVal"
        style="width: 160px; margin-left: 10px; height: 28px"
        prefix="蓄水量差："
      />
    </div>
    <!-- 内容区域 -->
    <div class="container">
      <TableChart :chartOption="state.chartOption" :isShowTable="state.isShowTable" />
      <!-- 侧边栏内容区域 -->
      <div class="basicInfoTableList" :class="{ isShowTable: !state.isShowTable }">
        <TableList
          :tableDataSource="state.tableDataSource"
          :tableColumns="state.tableColumns"
          rowKey="MSTM"
          :isNoTableBasicInfo="true"
        />
        <!-- 显示隐藏侧边栏内容区域 -->
        <div
          class="showTableBtn"
          :class="{ isRotate: !state.isShowTable }"
          @click="state.isShowTable = !state.isShowTable"
        >
          <Icon icon="tabler:caret-left-filled" size="20" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
  import { Icon } from "@gui-pkg/components";
  import TableChart from "@/components/TableChart";
  import TableList from "@/components/TableList";
  import setChartOption from './storageChartOption';
  import { zToW, wToZ } from './waterLevelInterconve';
  import { detail } from './storage.data.ts';
  import { getRZWCurveData } from '@/api/realTime/realData';

  // import { getStzvarvbMstmList, getStzvarvbList } from '/@/api/home/baseData';

  const props = defineProps({
    data: { type: Object },
  });

  const state = reactive({
    isShowTable: true,
    selectedValue: '2024-03-12 11:00:00',
    mstmData: ['2024-03-12 11:00:00'],
    featureData: JSON.parse(sessionStorage.getItem('FEATUREDATA')),
    titleName: '库容关系曲线',
    Z: '',
    W: '',
    Z_: '',
    W_: '',
    compareVal: '',
    chartOption: null,
    tableColumns: [
      { title: '监测时间', dataIndex: 'MSTM', key: 'MSTM',width: 154, align: 'center' },
      {
        title: '水位(m)',
        dataIndex: 'rz',
        key: 'rz',
        align: 'center',
      },
      { title: '蓄水量(百万m³)', dataIndex: 'w', key: 'w', align: 'center' },
    ],
    tableDataSource: [],
    loading: false,
  });

  // 库容曲线施测时间集
  const getMstmData = async () => {
    let mstmData = await getStzvarvbMstmList(stationData.stcd);
    state.mstmData = mstmData.time;
    if (mstmData?.time.length > 0) {
      state.selectedValue = mstmData.time[0];
      getZvarlData();
    }
  };

  // 水库库容曲线
  const getZvarlData = async () => {
    const responseData = await getRZWCurveData({stcd: props?.data?.stcd});
    for (let i = 0; i < responseData.length; i++) {
      responseData[i].MSTM = '2024-03-12 11:00:00';
      responseData[i].w = responseData[i].volume;
      responseData[i].rz = responseData[i].waterLevel;
    }
    state.chartOption = setChartOption(responseData, state.selectedValue + '库容');
    state.tableDataSource = responseData;
  };

  // 蓄水量转水位
  const handleClickWToZ = () => {
    let tList = state.tableDataSource;
    let w = state.W === '' ? 0 : parseFloat(state.W);
    if (tList.length === 0 || w < tList[0].w) {
      message.warning('输入值不能小于最小蓄水量');
      return;
    }
    if (w > tList[tList.length - 1].w) {
      message.warning('输入值不能大于最大蓄水量');
      return;
    }
    state.Z = wToZ(w, tList);
  };
  // 蓄水量转水位
  const handleClickWToZ_ = () => {
    let tList = state.tableDataSource;
    let w = state.W_ === '' ? 0 : parseFloat(state.W_);
    if (tList.length === 0 || w < tList[0].w) {
      message.warning('输入值不能小于最小蓄水量');
      return;
    }
    if (w > tList[tList.length - 1].w) {
      message.warning('输入值不能大于最大蓄水量');
      return;
    }
    state.Z_ = wToZ(w, tList);
  };
  // 水位转蓄水量
  const handleClickZToW = () => {
    let tList = state.tableDataSource;
    let z = state.Z === '' ? 0 : parseFloat(state.Z);
    if (tList.length === 0 || z < tList[0].rz) {
      message.warning('输入值不能小于最小水位');
      return;
    }
    if (z > tList[tList.length - 1].rz) {
      message.warning('输入值不能大于最大水位');
      return;
    }
    state.W = zToW(z, tList);
  };
  // 水位转蓄水量
  const handleClickZToW_ = () => {
    let tList = state.tableDataSource;
    let z = state.Z_ === '' ? 0 : parseFloat(state.Z_);
    if (tList.length === 0 || z < tList[0].rz) {
      message.warning('输入值不能小于最小水位');
      return;
    }
    if (z > tList[tList.length - 1].rz) {
      message.warning('输入值不能大于最大水位');
      return;
    }
    state.W_ = zToW(z, tList);
  };

  const compareNum = () => {
    let tList = state.tableDataSource;
    let w = state.W === '' ? 0 : parseFloat(state.W);
    let w_ = state.W_ === '' ? 0 : parseFloat(state.W_);
    if (tList.length === 0 || w < tList[0].w || w_ < tList[0].w) {
      message.warning('输入值不能小于最小蓄水量');
      return;
    }
    if (w > tList[tList.length - 1].w || w_ > tList[tList.length - 1].w) {
      message.warning('输入值不能大于最大蓄水量');
      return;
    }
    state.compareVal = (w * 10000 - w_ * 10000) / 10000;
  };

  onMounted(() => {
    // getMstmData();
    getZvarlData();
    // let chartData = detail.chartData;
    // state.chartOption = setChartOption(chartData, state.selectedValue);
    //state.tableDataSource = detail.tableData;
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .stageDischarge-page {
    width: 100%;
    height: 100%;
    .header {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      .dateRangePicker {
        margin-right: 10px;
        .title {
          margin-right: 10px;
          font-size: 14px;
          color: #333;
          white-space: nowrap;
        }
      }
      .timeInterval {
        display: flex;
        align-items: center;
        margin: 0 24px;
        span {
          margin-right: 10px;
          white-space: nowrap;
        }
      }
      .floodAmount {
        margin-left: 50px;
        .cal-item {
          .ant-btn-group {
            vertical-align: top;
          }
          .ant-btn {
            height: 28px;
          }
        }
        .cal-item:nth-child(1) {
          margin-bottom: 4px;
        }
      }
      @media screen and (max-width: 1150px) {
        .ant-radio-group {
          width: 200px;
        }
      }
    }
    .container {
      width: 100%;
      height: calc(100% - 70px);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      .basicInfoTableList {
        width: 390px;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        transition: all 0.5s;
      }
      /* ::v-deep(.gui-tableList-page) {
        height: 100%;
      } */
      .showTableBtn {
        position: absolute;
        top: 40%;
        left: -22px;
        z-index: 200;
        width: 24px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.5s;
        transform: translate(0px, -50%) rotate(180deg);
        background: url(@/assets/svg/sideBar.svg) no-repeat;
        span {
          margin-top: -20px;
          font-size: 18px;
          color: #c4c4c4;
          transform: rotate(0deg);
          transition: all 0.3s;
        }
        &:hover {
          span {
            color: #5780fa;
          }
        }
      }
      .isRotate {
        span {
          transform: rotate(180deg);
        }
      }
    }
    .isShowTable {
      right: -390px !important;
    }
  }
</style>
